<template>
  <div>
    <input v-model="url">
    <hr/>
    <button @clilck="execute">执行</button>
    <hr/>
    <hr/>
    <button v-if="canAbort" class="orange" @click="abort">中止</button>
    <p>data: {{ data }}</p>
    <p>error: {{ error }} </p>
    <p>statusCode: {{ statusCode }}</p>
    <p>isFetching: {{ isFetching }}</p>
    <p>isFinished: {{ isFinished }}</p>
    <button @click="toggleRefetch">切换</button>
  </div>
</template>

<script setup>
import { useFetch } from '@vueuse/core'
import { ref } from 'vue'
import { useToggle } from '@vueuse/shared'
// https://httpbin.org/get
// https://httpbin.org/delay/10
const url = ref('http://httpbin.org/status/500')
const refetch = ref(false)
const toggleRefetch = useToggle(refetch)
const { data, error, abort, statusCode, isFetching, isFinished, canAbort, execute } = useFetch(
  url,
  { refetch, immediate: false }
).get()

</script>
